<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>标题</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      left: 0px;
    }

    #div1 {
      top: 50px;
    }

    #div2 {
      top: 170px;
    }
  </style>
</head>

<body>
  <input type="button" value="从左到右800" id="lr800" />
  <div id="div1"></div>
  <!-- <div id="div2"></div> -->
</body>

</html>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    //   * 自定义动画
    // * 参数1：需要做动画的属性
    // * 参数2：需要执行动画的总时长
    // * 参数3：执行动画的时候的速度
    // * 参数4：执行动画完成之后的回调函数
    // linear匀速运动   swing缓动
    $('#lr800').click(function () {
      $('#div1').animate({
        left: 800,
        width: 300,
        height: 300
      }, 4000, "linear",function(){
        $('#div1').animate({
        left: 400,
        width: 200,
        height: 200
      }, 4000, "linear")
      })
      // 执行动画完成之后的回调函数加另外的属性样式
      // $('#div2').animate({ left: 800 }, 4000, "swing")

    })
  });
</script>